<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <title>盲盒领取记录</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/element_ui/css/index.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            background-color: #FFE8E8;
        }

        #app {
            width: 7.5rem;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .coupon {
            width: 6.7rem;
            height: 2rem;
            margin-top: 0.4rem;
            margin-left: 0.4rem;
            border-radius: 0.2rem;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .box1 {
            position: relative;
            width: 5.7rem;
            height: 2rem;
            float: left;
        }

        .box2 {
            position: relative;
            width: 1rem;
            height: 2rem;
            float: right;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div v-for="(item, index) in history_res" class="coupon" v-bind:style="{backgroundImage: 'url(' + topImg + item['status']+'.png)'}">
        <div class="box1">
            <div style="position: absolute;top: 0.5rem;left: 0.4rem">
                <h5 style="font-size: 0.3rem">{{item['title']}}</h5>
                <p style="font-size: 0.22rem;margin-top: 0.1rem;margin-left: 0.1rem"> {{item['end_time']}}</p>
                <p style="font-size: 0.22rem;margin-left: 0.1rem"> {{item['give_time']}}</p>
            </div>
        </div>
        <div class="box2" @click="use_coupon(item)">
        </div>
    </div>
    <div v-if="lastPage">
        <p style="text-align: center;color: #6C6C6C;margin-top: 0.5rem;margin-bottom: 1rem">没有更多了</p>
    </div>
    <div v-else>
        <p style="text-align: center;color: #6C6C6C;margin-top: 0.5rem;margin-bottom: 1rem">加载中...</p>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="/static/vue.js"></script>
<!-- import JavaScript -->
<script src="/static/element_ui/js/index.js"></script>
<script src="/static/rem.js"></script>
<script src="/static/axios.js"></script>
<script>
    var app_type = '{$app_type}'

    /**
     * 通用跳转
     * @param target string 跳转方式
     * @param link string 跳转地址
     */
    function commonJsToNative(target, link) {
        if (!target)
            return
        else if (target === 'link') {
            link = domain + link
        }

        switch (app_type) {
            case 'ios':
                window.webkit.messageHandlers.commonJsToNative.postMessage({
                    'target': target,
                    'link': link,
                });
                break;
            case 'android':
                androidwebview.commonJsToNative(target, link)
                break;
            default:
                console.log('not ios or android')
                if ('link' === target) {
                    window.location.href = link
                }
        }
    }

    /**
     * 简易tost层
     * @param msg
     * @param statusCode
     * @constructor
     */
    function Toast(msg, statusCode) {
        duration = isNaN(statusCode) ? 3000 : statusCode;
        var m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText = "width:4.5rem;padding:0 14px;height: 1.48rem;color: rgb(255, 255, 255);line-height: 1.48rem;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 0.24rem;";
        document.body.appendChild(m);
        setTimeout(function () {
            var d = 0.5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function () {
                document.body.removeChild(m)
            }, d * 1000);
        }, duration);
    }

    /**
     * vue控制
     */
    new Vue({
        el: '#app',
        beforeCreate: function () {
            var that = this;
            ///获取剩余抽奖次数，总潜力值，优惠券信息，tost信息
            axios.get('{$domain}/webactive/active/getPrizeRecordList',
                {
                    headers: {$headers},
                    params: {
                        active_id: 1,
                        page: 1
                    }
                }
            ).then(function (res) {
                var code = res.data['code'];
                var data = res.data['data'];
                var msg = res.data['msg'];
                if (data['current_page'] == data['last_page']) {
                    that.lastPage = true;
                } else {
                    that.lastPage = false;
                }
                if (code == 200) {
                    that.history_res = data['data'];
                    that.total_count = data['total']
                    that.per_page = data['per_page']
                    that.current_page = data['current_page']
                    that.last_page = data['last_page']
                } else {
                    new Toast(msg)
                }
            }).catch(function (error) {
                new Toast(error)
            });
        },
        mounted: function () {
            var that = this;
            window.onscroll = function () {
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                //滚动条到底部的条件
                if (scrollTop + windowHeight == scrollHeight) {
                    //到了这个就可以进行业务逻辑加载后台数据了
                    ///获取剩余抽奖次数，总潜力值，优惠券信息，tost信息
                    if (!that.lastPage) {
                        axios.get('{$domain}/webactive/active/getPrizeRecordList',
                            {
                                headers: that.headers,
                                params: {
                                    active_id: 1,
                                    page: that.current_page += 1
                                }
                            }
                        ).then(function (res) {
                            var code = res.data['code'];
                            var data = res.data['data'];
                            var msg = res.data['msg'];
                            if (data['current_page'] == data['last_page']) {
                                that.lastPage = true;
                            } else {
                                that.lastPage = false;
                            }
                            if (code == 200) {
                                if (data) {
                                    data['data'].forEach(function (v, k) {
                                        that.history_res.push(v);
                                    })
                                }
                            } else {
                                new Toast(msg)
                            }
                        }).catch(function (error) {
                            console.log(error)
                            new Toast(error)
                        });
                    }
                }
            }
        },
        data: function () {
            return {
                topImg: '{$oss}active/web/images/coupon_',
                headers: {$headers},
                history_res: [],
                current_page: 1,
                lastPage: true
            }
        }, methods: {
            use_coupon: function (info) {
                console.log(info)
                switch (info['status']) {
                    case 0:
                        commonJsToNative(info['target'], info['link'])
                        break;
                    case 2:
                        if (app_type == 'ios') {
                            window.history.back();
                        } else {
                            commonJsToNative('local', 'finish')
                        }
                        break;
                }
            }
        }
    })

    //友盟打点
    var SITE_ID = '1279561669'
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=' + SITE_ID + '&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
